<div class="docs-example-viewer-wrapper">
  <div class="docs-example-viewer-title">
    <div class="docs-example-viewer-title-spacer">{{ exampleData.title }}</div>
    <button
      *ngIf="exampleData.debug && _debugFields"
      mat-icon-button
      type="button"
      (click)="toggleDebugView()"
      [matTooltip]="'Debug'"
      aria-label="Debug example source"
    >
      <mat-icon>bug_report</mat-icon>
    </button>
    <formly-stackblitz-button [type]="type" [example]="exampleData"></formly-stackblitz-button>
    <button
      mat-icon-button
      type="button"
      (click)="toggleSourceView()"
      [matTooltip]="'View source'"
      aria-label="View example source"
    >
      <mat-icon>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100%"
          viewBox="0 0 24 24"
          fit=""
          preserveAspectRatio="xMidYMid meet"
          focusable="false"
        >
          <path fill="none" d="M0 0h24v24H0V0z"></path>
          <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
        </svg>
      </mat-icon>
    </button>
  </div>

  <div class="docs-example-viewer-source" *ngIf="showSource">
    <mat-tab-group>
      <mat-tab *ngFor="let f of exampleFiles" [label]="f.file">
        <div class="docs-example-source-wrapper">
          <button
            mat-icon-button
            type="button"
            class="docs-example-source-copy"
            title="Copy example source"
            aria-label="Copy example source to clipboard"
            (click)="copySource(textContent)"
          >
            <mat-icon>file_copy</mat-icon>
          </button>
          <pre class="docs-example-source" [innerHtml]="f.content" #textContent></pre>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>

  <div *ngIf="showDebug && _debugFields" style="padding: 10px 100px; background: white">
    <formly-form [model]="demoComponentRef.instance.fields[0]" [fields]="_debugFields"></formly-form>
  </div>

  <div class="docs-example-viewer-body">
    <div class="alert alert-info" *ngIf="exampleData.description" [innerHtml]="exampleData.description"></div>

    <ng-template #demo></ng-template>

    <div *ngIf="(!exampleData.debug || showDebug) && demoComponentRef">
      <h3>Form Data</h3>
      <pre [style.display]="'none'">{{ model }}</pre>
      <pre #modelPreview></pre>
    </div>
  </div>
</div>
